/*page1*/

.page1.active .max-ul .blue1{
	animation-name: page1-blue1;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode: backwards;
	animation-iteration-count: 1;
	animation-play-state: running;
}
@keyframes page1-blue1{
	0%{
		transform: translateY(-100%);
	}
	100%{
		transform: translateY(0);
	}
}
.page1.active .max-ul .blue2{
	animation-name: page1-blue1;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode: backwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 0.5s;
}
.page1.active .max-ul .blue3{
	animation-name: page1-blue1;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode: backwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 1s;
}
.page1.active .animal-text{
	animation-name: animal-text;
	animation-duration: 1s;
	animation-timing-function: cubic-bezier(0.42, 0, 0.84, 0.65);
	animation-fill-mode: backwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 2s;
}
@keyframes animal-text{
	0%{
		transform: translateX(-100%);
	}
	60%{
		transform: rotateZ(20deg);
	}
	65%{
		transform: rotateZ(0deg);
	}
	70%{
		transform: rotateZ(-20deg);
	}
	75%{
		transform: rotateZ(0deg);
	}
	80%{
		transform: rotateZ(20deg);
	}
	85%{
		transform: rotateZ(0deg);
	}
	90%{
		transform: rotateZ(-20deg);
	}
	95%{
		transform: rotateZ(0deg);
	}
	100%{
		transform: translateX(0);
	}
}
.page1.active .ball{
	animation-name:go;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	transform: scale(0,0) rotatez(360deg);
	animation-delay: 3s;
	
	
}
.page1.active .ball img{
	animation-name:ball-img;
	animation-duration: 1.5s;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
	animation-iteration-count:infinite;
	animation-play-state: running;
	
	animation-delay: 5s;
}
@keyframes ball-img{
	0%{
		
	}
	50%{
		transform: scale(1.2,1.2);
	}
	60%{
		transform: rotateZ(-30deg) scale(1.2,1.2);
	}
	65%{
		transform: rotateZ(0deg) scale(1.2,1.2);
	}
	70%{
		transform: rotateZ(30deg) scale(1.2,1.2);
	}
	75%{
		transform: rotateZ(0deg) scale(1.2,1.2);
	}
	80%{
		transform: rotateZ(-30deg) scale(1.2,1.2);
	}
	85%{
		transform: rotateZ(0deg) scale(1.2,1.2);
	}
	90%{
		transform: rotateZ(30deg) scale(1.2,1.2);
	}
	100%{
		transform: rotateZ(0deg) scale(1,1);
	}
}
         @keyframes go{
                //代表动画的进度
                0%{
                    transform: scale(0,0) rotatez(360deg);
                }
                
              	50%{
              		transform: scale(0.5,0.5) rotatez(180deg);
              	}
                100%{
                    transform: scale(1,1) rotatez(0deg);
                }
            }
            
            .page1.active .neimu{
            	animation-name: neimu;
				animation-duration: 1s;
				animation-timing-function: linear;
				animation-fill-mode: backwards;
				animation-iteration-count: 1;
				animation-play-state: running;
				animation-delay: 2s;
            }
            @keyframes neimu{
            	0%{
            		transform: translateX(100%);
            	}
            	100%{
            		transform: translateX(0);
            	}
            }
            
            .page1.active .zhizuo{
            	animation-name: zhizuo;
				animation-duration: 5s;
				animation-timing-function: linear;
				animation-fill-mode:forwards;
				animation-iteration-count: 1;
				animation-play-state: running;
				animation-delay: 3s;
				transform: translateX(100%);
            }
            @keyframes zhizuo{
            	0%{transform: translateX(100%);}
            	
            	50%{
            		transform: translateX(0);
            		opacity: 1;
            	}
            	100%{
            		transform: translateX(0);
            		opacity: 0;
            	}
            }
/*xiaogui*/
.page2.active .click-liaojie .xiaogui{
	animation-name: gui;
	animation-duration: 1s;
	animation-timing-function: cubic-bezier(0, 0, 1,-0.16);
	animation-fill-mode: backwards;
	animation-iteration-count: infinite;
	animation-play-state: running;
	animation-delay: 1.5s;
	
}
.page2.active .click-liaojie{
	animation-name: left-gui;
	animation-duration: 1.5s;
	animation-timing-function: linear;
	animation-fill-mode: backwards;
	animation-iteration-count: 1;
	animation-play-state: running;
}
@keyframes left-gui{
	0%{
		transform: translateX(150%);
	}
	80%{
		transform: translateX(-10%);
	}
	100%{
		transform: translateX(0);
	}
}
@keyframes gui{
	0%{}
	
	50%{
		transform: rotatez(10deg)  scale(1.2,1.2);
		
	}
	55%{
		transform: rotatez(0deg)  scale(1.2,1.2);
		
	}
	60%{
		transform:rotatez(-10deg)  scale(1.2,1.2) ;
		
	}
	65%{
		transform: rotatez(0)
		 scale(1.2,1.2);
		
	}
	70%{
		transform: rotatez(10deg)  scale(1.2,1.2);
		
	}
	75%{
		transform: rotatez(0deg)  scale(1.2,1.2);
		
	}
	80%{
		transform:rotatez(-10deg)  scale(1.2,1.2) ;
		
	}
	85%{
		transform: rotatez(0deg)  scale(1.2,1.2);
	}
	90%{
		transform: rotatez(10deg)  scale(1.2,1.2);
	}
	100%{
		transform:rotateZ(0) scale(1,1)
		
	}
	
}
/*音乐*/
.music{
	animation-name: music;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-fill-mode: backwards;
	animation-iteration-count: infinite;
	animation-play-state: running;
	
}
@keyframes music{
	0%{}
	50%{
		transform: rotateZ(180deg);
	}
	
	100%{
		transform: rotateZ(360deg);
		
	}
	
}


@keyframes xiaogui{
0%{}
	
	50%{
		transform: rotatez(10deg)  scale(1.2,1.2);
		
	}
	55%{
		transform: rotatez(0deg)  scale(1.2,1.2);
		
	}
	60%{
		transform:rotatez(-10deg)  scale(1.2,1.2) ;
		
	}
	65%{
		transform: rotatez(0)
		 scale(1.2,1.2);
		
	}
	70%{
		transform: rotatez(10deg)  scale(1.2,1.2);
		
	}
	75%{
		transform: rotatez(0deg)  scale(1.2,1.2);
		
	}
	80%{
		transform:rotatez(-10deg)  scale(1.2,1.2) ;
		
	}
	85%{
		transform: rotatez(0deg)  scale(1.2,1.2);
	}
	90%{
		transform: rotatez(10deg)  scale(1.2,1.2);
	}
	100%{
		transform:rotateZ(0) scale(1,1)
		
	}
	
}


/*page4的xiaogui*/
.page4.active .click-liaojie4 .xiaogui4{
	animation-name: xiaogui;
	animation-duration: 1.2s;
	animation-timing-function: cubic-bezier(0, 0, 1,-0.16);
	animation-fill-mode: backwards;
	animation-iteration-count: infinite;
	animation-play-state: running;
	animation-delay: 5.5s;
}
/*page4圆*/
.page4.active .yuan4{
	animation-name: yuan;
	animation-duration: 1.2s;
	animation-timing-function: cubic-bezier(0, 0, 1,-0.16);
	animation-fill-mode: backwards;
	animation-iteration-count: infinite;
	animation-play-state: running;
	
}

.page5.active .click-liaojie4 .xiaogui4{
	animation-name: xiaogui;
	animation-duration: 1.2s;
	animation-timing-function: cubic-bezier(0, 0, 1,-0.16);
	animation-fill-mode: backwards;
	animation-iteration-count: infinite;
	animation-play-state: running;
	animation-delay: 5.5s;
	
}

.page6.active .click-liaojie6 .xiaogui{
	animation-name: xiaogui;
	animation-duration: 1.2s;
	animation-timing-function: cubic-bezier(0, 0, 1,-0.16);
	animation-fill-mode: backwards;
	animation-iteration-count: infinite;
	animation-play-state: running;
	animation-delay: 5.5s;
}
.page6.active .yuan6{
	animation-name: yuan;
	animation-duration: 1.2s;
	animation-timing-function: cubic-bezier(0, 0, 1,-0.16);
	animation-fill-mode: backwards;
	animation-iteration-count: infinite;
	animation-play-state: running;
}
.page7.active .click-liaojie4 .xiaogui4{
	animation-name: xiaogui;
	animation-duration: 1.2s;
	animation-timing-function: cubic-bezier(0, 0, 1,-0.16);
	animation-fill-mode: backwards;
	animation-iteration-count: infinite;
	animation-play-state: running;
	animation-delay: 5.5s;
}
.page7.active .yuan7{
	animation-name: yuan;
	animation-duration: 1.2s;
	animation-timing-function: cubic-bezier(0, 0, 1,-0.16);
	animation-fill-mode: backwards;
	animation-iteration-count: infinite;
	animation-play-state: running;
}
/*page3*/
.page3.active .chuanshiren{
	animation-name: chuanshiren;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode: backwards;
	animation-iteration-count: 1;
	animation-play-state: running;
}
@keyframes chuanshiren{
	0%{
		transform: translatey(110%);
	}
	100%{
		transform: translateY(0);
	}
}
.page3.active .click-liaojie .xiaogui{
	animation-name: xiaogui;
	animation-duration: 1.2s;
	animation-timing-function: cubic-bezier(0, 0, 1,-0.16);
	animation-fill-mode: backwards;
	animation-iteration-count: infinite;
	animation-play-state: running;
	animation-delay: 4.5s;
	z-index: 1;
	
}
.page3.active .chanpin{
	animation-name:chanpin;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode: backwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 1s;
}
@keyframes chanpin{
	0%{
		transform: translatex(-110%);
	}
	100%{
		transform: translatex(0);
	}
}

.page3.active .beijing{
	animation-name: beijing;
	animation-duration: 2s;
	animation-timing-function: cubic-bezier(0.99, 0.16, 1, 1);
	animation-fill-mode: backwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 2s;
}
@keyframes beijing{
	0%{
		transform: translateY(140%);
	}
	50%{
		transform: translateY(0);
	}
	55%{
		transform: translateY(-5%);
	}
	60%{
		transform: translateY(5%);
	}
	65%{
		transform: translateY(0);
	}
	70%{
		transform: translateY(-5%);
	}
	75%{
		transform: translateY(0);
	}
	80%{
		transform: translateY(5%);
	}
	100%{
		transform: translateY(0);
	}
}


.page3.active .click-liaojie{
	animation-name: liaojie;
	animation-duration: 1s;
	animation-timing-function: cubic-bezier(0.49, 0.99, 0.71, 1.15);
	animation-fill-mode: backwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 3s;
	

}
@keyframes liaojie{
	0%{
		transform: translateX(-120%);
	}
	100%{
		transform: translateX(0);
	}
}
.page3 .yuan{
	transform: rotateX(90deg);
	transition: all 1s linear 4s;

}
.page3.active .yuan{
	transform: rotateX(0);
}
.page3.active .yuan img{
	animation-name: yuan-a2;
	animation-duration: 1.2s;
	animation-timing-function: cubic-bezier(0, 0, 1,-0.16);
	animation-fill-mode: backwards;
	animation-iteration-count: infinite;
	animation-play-state: running;
	animation-delay: 4.5s;
}



@keyframes yuan-a2{
	0%{}
	
	50%{
		transform: rotatez(10deg)  scale(1.2,1.2);
		
	}
	55%{
		transform: rotatez(0deg)  scale(1.2,1.2);
		
	}
	60%{
		transform:rotatez(-10deg)  scale(1.2,1.2) ;
		
	}
	65%{
		transform: rotatez(0)
		 scale(1.2,1.2);
		
	}
	70%{
		transform: rotatez(10deg)  scale(1.2,1.2);
		
	}
	75%{
		transform: rotatez(0deg)  scale(1.2,1.2);
		
	}
	80%{
		transform:rotatez(-10deg)  scale(1.2,1.2) ;
		
	}
	85%{
		transform: rotatez(0deg)  scale(1.2,1.2);
	}
	90%{
		transform: rotatez(10deg)  scale(1.2,1.2);
	}
	100%{
		transform:rotateZ(0) scale(1,1)
		
	}
	
}
.page3.active .yuan{
	animation-name: yuan-a1;
	animation-duration: 1.5s;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 3s;

}
@keyframes yuan-a1{
	0%{
		transform: rotateX(90deg);
	}
	100%{
		transform: rotateX(0deg);
	}
}

/*page4*/
.page4.active .chuanshiren4{
	animation-name: chuanshiren;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode: backwards;
	animation-iteration-count: 1;
	animation-play-state: running;
}
.page4.active .chanpin4{
	animation-name:chanpin;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode: backwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 1s;
}
.page4.active .beijing4{
	animation-name: beijing;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-fill-mode: backwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 2s;
}
.page4.active .yuan4{
	animation-name: yuan-a3;
	animation-duration: 1.5s;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 4s;
	transform: translateX(110%);
}
@keyframes yuan-a3{
	0%{
		transform: translateX(110%) rotateZ(360deg);
	}
	100%{
		transform: translateX(0) rotateZ(0deg);
	}
}
.page4.active .yuan4 img{
	animation-name: yuan-a2;
	animation-duration: 1.2s;
	animation-timing-function: cubic-bezier(0, 0, 1,-0.16);
	animation-fill-mode: backwards;
	animation-iteration-count: infinite;
	animation-play-state: running;
	animation-delay: 5.5s;
}

.page4.active .click-liaojie4{
	animation-name: page4-liaojie;
	animation-duration: 1.5s;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 4s;
	transform: translateX(110%);
}
@keyframes page4-liaojie{
	0%{
		transform: translateX(110%);
	}
	100%{
		transform: translateX(0);
	}
}
.page4.active .guiji{
	animation-name: page4-liaojie;
	animation-duration: 1.5s;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 4s;
	transform: translateX(110%);
}

/*page5*/
.page5.active .chuanshiren5{
	animation-name: chuanshiren;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode: backwards;
	animation-iteration-count: 1;
	animation-play-state: running;
}
.page5.active .chanpin4{
	animation-name:chanpin;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode: backwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 1s;
}
.page5.active .beijing5{
	animation-name: beijing;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-fill-mode: backwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 2s;
}
.page5.active .yuan5{
	animation-name: yuan-a3;
	animation-duration: 1.5s;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 4s;
	transform: translateX(120%);
}
.page5.active .yuan5 img{
	animation-name: yuan-a2;
	animation-duration: 1.2s;
	animation-timing-function: cubic-bezier(0, 0, 1,-0.16);
	animation-fill-mode: backwards;
	animation-iteration-count: infinite;
	animation-play-state: running;
	animation-delay: 5.5s;
}

.page5.active .click-liaojie4{
	animation-name: page4-liaojie;
	animation-duration: 1.5s;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 4s;
	transform: translateX(110%);
}

.page5.active .guiji{
	animation-name: page4-liaojie;
	animation-duration: 1.5s;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 4s;
	transform: translateX(100%);
}
/*page6*/
.page6.active .chuanshiren6{
	animation-name: chuanshiren;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode: backwards;
	animation-iteration-count: 1;
	animation-play-state: running;
}
.page6.active .chanpin{
	animation-name:chanpin;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode: backwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 1s;
}
.page6.active .beijing6{
	animation-name: beijing;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-fill-mode: backwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 2s;
}
.page6.active .yuan6{
	animation-name: yuan-a3;
	animation-duration: 1.5s;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 4s;
	transform: translateX(120%);
}
.page6.active .yuan6 img{
	animation-name: yuan-a2;
	animation-duration: 1.2s;
	animation-timing-function: cubic-bezier(0, 0, 1,-0.16);
	animation-fill-mode: backwards;
	animation-iteration-count: infinite;
	animation-play-state: running;
	animation-delay: 5.5s;
}

.page6.active .click-liaojie6{
	animation-name: page6-liaojie;
	animation-duration: 1.5s;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 4s;
	transform: translateX(-110%);
}
@keyframes page6-liaojie{
	0%{
		transform: translateX(-110%) ;
	}
	100%{
		transform: translateX(0);
	}
}

/*
 page7
 * */
.page7.active .chuanshiren5{
	animation-name: chuanshiren;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode: backwards;
	animation-iteration-count: 1;
	animation-play-state: running;
}
.page7.active .chanpin4{
	animation-name:chanpin;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode: backwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 1s;
}
.page7.active .beijing7{
	animation-name: beijing;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-fill-mode: backwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 2s;
}
.page7.active .yuan7{
	animation-name: yuan-a3;
	animation-duration: 1.5s;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 4s;
	transform: translateX(120%);
}
.page7.active .yuan7 img{
	animation-name: yuan-a2;
	animation-duration: 1.2s;
	animation-timing-function: cubic-bezier(0, 0, 1,-0.16);
	animation-fill-mode: backwards;
	animation-iteration-count: infinite;
	animation-play-state: running;
	animation-delay: 5.5s;
}

.page7.active .click-liaojie4{
	animation-name: page4-liaojie;
	animation-duration: 1.5s;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 4s;
	transform: translateX(110%);
}

.page7.active .guiji{
	animation-name: page4-liaojie;
	animation-duration: 1.5s;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 4s;
	transform: translateX(100%);
}

/*page8*/
.page8.active .max-ul .blue{
	animation-name: page8-blue;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-play-state: running;
}
@keyframes page8-blue{
	0%{
		transform: translateY(100%);
	}
	100%{
		transform: translateY(0);
	}
}
.page8.active .max-ul .bai{
	animation-name: page8-bai;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-play-state: running;
}
@keyframes page8-bai{
	0%{
		transform: translateY(-100%);
	}
	100%{
		transform: translateY(0);
	}
}
.page8.active .niu{
	animation-name: niu;
	animation-duration: 0.5s;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 1.5s;
	transform: translateY(100%);
}
@keyframes niu{
	0%{transform: translateY(100%);
}
60%{
	transform: translateY(-20%);
}
80%{
	transform: translateY(20%);
}
100%{
	transform: translateY(0);
}
}
.page8.active .niao{
	animation-name: niu;
	animation-duration: 0.5s;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 2s;
	transform: translateY(100%);
}
.page8.active .wa{
	animation-name: niu;
	animation-duration: 0.5s;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 2.5s;
	transform: translateY(100%);
}
.page8.active .bainiu{
	animation-name: niu;
	animation-duration: 0.5s;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 3s;
	transform: translateY(100%);
}
.page8.active .daxiang{
	animation-name: niu;
	animation-duration: 0.5s;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 3.5s;
	transform: translateY(100%);
}
.page8.active .pao{
	animation-name: niu;
	animation-duration: 0.5s;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 4s;
	transform: translateY(100%);
}
.page8.active .niu img{
	animation-name: niu-img;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 5s;
	
}
@keyframes niu-img{
	0%{
		
	}
	10%{
		transform: scale(1.2,1.2);
	}
	30%{
		transform: rotateZ(30deg) scale(1.2,1.2);
	}
	40%{
		transform: rotateZ(0deg) scale(1.2,1.2);
	}
	50%{
		transform: rotateZ(-30deg) scale(1.2,1.2);
	}
	60%{
		transform: rotateZ(0deg) scale(1.2,1.2);
	}
	70%{
		transform: rotateZ(30deg) scale(1.2,1.2);
	}
	80%{
		transform: rotateZ(0deg) scale(1.2,1.2);
	}
	90%{
		transform: rotateZ(-30deg) scale(1.2,1.2);
	}
	100%{
		transform: rotateZ(0) scale(1,1);
	}
}
.page8.active .niao img{
	animation-name: niu-img;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 5s;
	
}
.page8.active .wa img{
	animation-name: niu-img;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 5s;
	
}
.page8.active .daxiang img{
	animation-name: niu-img;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 5s;
	
}
.page8.active .pao img{
	animation-name: niu-img;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 5s;
	
}
.page8.active .bainiu img{
	animation-name: niu-img;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-delay: 5s;
	
}


